<!DOCTYPE html>
<html lang="en-US">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="discrption" content="parallax one page" />
    <meta
      name="keyword"
      content="agency, business, corporate, creative, freelancer, interior, joomla template, K2 Blog, minimal, modern, multipurpose, personal, portfolio, responsive, simple"
    />
    <!-- Title -->
    <title>我的博客</title>
    <!-- Font Google -->
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Karla:400,700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="shortcut icon"
      href="assets/img/favicon.ico"
      type="image/x-icon"
    />
    <link rel="icon" href="assets/img/favicon.ico" type="image/x-icon" />
    <!-- custom styles(optional) -->
    <link href="assets/css/plugins.css" rel="stylesheet" />
    <link href="assets/css/style.css" rel="stylesheet" />
  </head>
  <!--classic-menu-->
  <body class="dsn-effect-scroll dsn-cursor-effect dsn-ajax">
    <div class="preloader">
      <div class="preloader-bar">
        <div class="preloader-progress"></div>
      </div>
      <h1 class="title v-middle">
        <span class="percent">0</span><span class="text-strok">DARO</span
        ><span class="text-fill">DARO</span>
      </h1>
    </div>
    <div class="site-header">
      <div
        class="extend-container d-flex w-100 align-items-baseline justify-content-between align-items-end"
      >
        <div class="inner-header p-relative">
          <div class="main-logo">
            <a href="index.html" data-dsn="parallax"
              ><img
                class="dark-logo"
                src="assets/img/logo-dark.png"
                alt="" /><img
                class="light-logo"
                src="assets/img/logo.png"
                alt=""
            /></a>
          </div>
        </div>
        <div class="menu-icon d-flex align-items-baseline">
          <div class="text-menu p-relative font-heading text-transform-upper">
            <div class="p-absolute text-button">Menu</div>
            <div class="p-absolute text-open">Open</div>
            <div class="p-absolute text-close">Close</div>
          </div>
          <div class="icon-m" data-dsn="parallax">
            <span
              class="menu-icon-line p-relative d-inline-block icon-top"
            ></span
            ><span
              class="menu-icon-line p-relative d-inline-block icon-center"
            ></span
            ><span class="menu-icon-line p-relative d-block icon-bottom"></span>
          </div>
        </div>
        <nav
          class="accent-menu main-navigation p-absolute w-100 d-flex align-items-baseline"
        >
          <div class="menu-cover-title">Menu</div>
          <ul
            class="extend-container p-relative d-flex flex-column justify-content-center h-100"
          >
            <li class="dsn-active dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Home</span
                ><span class="dsn-meta-menu">01</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Home</span
                  >
                </li>
                <li>
                  <a href="index.html"
                    ><span class="dsn-title-menu">One Page 1</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="demo2.html"
                    ><span class="dsn-title-menu">One Page 2</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
                <li>
                  <a href="demo3.html"
                    ><span class="dsn-title-menu">One Page 3</span
                    ><span class="dsn-meta-menu">03</span></a
                  >
                </li>
                <li>
                  <a href="demo-video.html"
                    ><span class="dsn-title-menu">One Page 4</span
                    ><span class="dsn-meta-menu">04</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Sliders</span
                ><span class="dsn-meta-menu">02</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Sliders</span
                  >
                </li>
                <li>
                  <a href="slider2.html"
                    ><span class="dsn-title-menu">Slider Vertical</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="slider-horizontal.html"
                    ><span class="dsn-title-menu">Slider Horizontal</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
                <li>
                  <a href="slider3.html"
                    ><span class="dsn-title-menu">Slider 3 Column</span
                    ><span class="dsn-meta-menu">03</span></a
                  >
                </li>
                <li>
                  <a href="slider.html"
                    ><span class="dsn-title-menu">Slider slice</span
                    ><span class="dsn-meta-menu">04</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Portfolio</span
                ><span class="dsn-meta-menu">03</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Portfolio</span
                  >
                </li>
                <li>
                  <a href="work.html"
                    ><span class="dsn-title-menu">Work 3 columns</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="work-2.html"
                    ><span class="dsn-title-menu">Work V2</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
                <li>
                  <a href="gallery.html"
                    ><span class="dsn-title-menu">gallery</span
                    ><span class="dsn-meta-menu">03</span></a
                  >
                </li>
                <li>
                  <a href="work-grid-2.html"
                    ><span class="dsn-title-menu">Work 2 columns</span
                    ><span class="dsn-meta-menu">04</span></a
                  >
                </li>
                <li>
                  <a href="work-grid-4.html"
                    ><span class="dsn-title-menu">Work 4 columns</span
                    ><span class="dsn-meta-menu">05</span></a
                  >
                </li>
                <li>
                  <a href="work-load.html"
                    ><span class="dsn-title-menu">Work Load More</span
                    ><span class="dsn-meta-menu">06</span></a
                  >
                </li>
                <li>
                  <a href="work-4.html"
                    ><span class="dsn-title-menu">Work horizontal</span
                    ><span class="dsn-meta-menu">07</span></a
                  >
                </li>
                <li>
                  <a href="work-3.html"
                    ><span class="dsn-title-menu">Work carousel</span
                    ><span class="dsn-meta-menu">08</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">About</span
                ><span class="dsn-meta-menu">04</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >About</span
                  >
                </li>
                <li>
                  <a href="about.html"
                    ><span class="dsn-title-menu">About Us</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="about-2.html"
                    ><span class="dsn-title-menu">About Us V2</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Stories</span
                ><span class="dsn-meta-menu">05</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Stories</span
                  >
                </li>
                <li>
                  <a href="blog.html"
                    ><span class="dsn-title-menu">Stories</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="blog-grid.html"
                    ><span class="dsn-title-menu">Stories Grid</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
                <li>
                  <a href="post.html"
                    ><span class="dsn-title-menu">Single Post</span
                    ><span class="dsn-meta-menu">03</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Contact</span
                ><span class="dsn-meta-menu">06</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Contact</span
                  >
                </li>
                <li>
                  <a href="contact.html"
                    ><span class="dsn-title-menu">Contact</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="contact-2.html"
                    ><span class="dsn-title-menu">Contact V2</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
              </ul>
            </li>
          </ul>
          <div class="container-content d-flex flex-column justify-content-end">
            <div class="nav__info">
              <div class="nav-content">
                <p class="title-line">Studio</p>
                <p>
                  26-30 New Damietta<br />
                  El-Mahalla El-Kubra,SK1 66LM
                </p>
              </div>
              <div class="nav-content">
                <p class="title-line">Contact</p>
                <p class="links over-hidden">
                  <a
                    href="#"
                    data-hover-text="+00 (2)012 3321"
                    class="link-hover"
                    >+00(2)012 3321</a
                  >
                </p>
                <p class="links over-hidden">
                  <a
                    href="#"
                    data-hover-text="info@dsngrid.com"
                    class="link-hover"
                    >info@dsngrid.com</a
                  >
                </p>
              </div>
            </div>
            <div class="nav-social">
              <div class="nav-social-inner p-relative">
                <p class="title-line">Follow us</p>
                <ul>
                  <li>
                    <a href="#" target="_blank" rel="nofollow"
                      >Dribbble.
                      <div class="icon-circle"></div>
                    </a>
                  </li>
                  <li>
                    <a href="#" target="_blank" rel="nofollow"
                      >Behance.
                      <div class="icon-circle"></div>
                    </a>
                  </li>
                  <li>
                    <a href="#" target="_blank" rel="nofollow"
                      >Linkedin.
                      <div class="icon-circle"></div>
                    </a>
                  </li>
                  <li>
                    <a href="#" target="_blank" rel="nofollow"
                      >Twitter.
                      <div class="icon-circle"></div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="nav-border-bottom"></div>
        </nav>
      </div>
    </div>
    <main class="main-root">
      <div id="dsn-scrollbar">
        <header data-dsn-header="project">
          <div
            class="header-project p-relative h-100-v over-hidden"
            data-dsn-header="parallax"
          >
            <div
              id="dsn-hero-parallax-img"
              data-dsn-ajax="img"
              class="p-absolute w-100 h-100 over-hidden"
              data-overlay="5"
            >
              <img
                class="cover-bg-img"
                src="assets/img/project/project4/1.jpg"
                alt=""
              />
            </div>
            <div class="margin-lr-100 h-100">
              <div class="row align-items-center h-100">
                <div class="content p-relative w-100">
                  <div class="intro-project">
                    <div id="dsn-hero-title" class="intro-title">
                      <div class="metas d-inline-block">
                        <span>Digital Art</span>
                      </div>
                      <h1 class="title" data-dsn-ajax="title">Intentional</h1>
                    </div>
                    <p id="dsn-hero-description" class="description">
                      Personal conceptual project. Reflecting on my personal
                      style of paint illustration,on what were my initial ideas
                      on it,and treating it as a tangible,spatial physical
                      object.
                    </p>
                    <div
                      id="dsn-hero-desc-items"
                      class="intro-project-details d-flex"
                    >
                      <div class="descrption-item">
                        <h5>By</h5>
                        <p>Pawel Nolbert</p>
                      </div>
                      <div class="descrption-item">
                        <h5>ROLE</h5>
                        <p>Digital Art</p>
                      </div>
                      <div class="descrption-item">
                        <h5>Published</h5>
                        <p>June 13th 2018</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <a
              href="https://www.behance.net/gallery/66749151/Intentional?tracking_source=search_projects_recommended%7Ccolor"
              target="_blank"
              class="link-vist p-absolute"
              ><span class="link-vist-text">Visit Site</span>
              <div class="link-vist-arrow">
                <svg viewBox="0 0 80 80">
                  <polyline
                    points="19.89 15.25 64.03 15.25 64.03 59.33"
                  ></polyline>
                  <line x1="64.03" y1="15.25" x2="14.03" y2="65.18"></line>
                </svg>
              </div>
            </a>
            <div class="scroll-d p-absolute">
              <img src="assets/img/scroll_down.svg" alt="" />
            </div>
          </div>
        </header>
        <div class="wrapper">
          <div class="box-seat box-seat-bottom box-seat-qute section-margin">
            <div class="container-fluid no-padding">
              <div class="inner-img" data-dsn-grid="move-up">
                <img
                  class="has-bigger-scale"
                  src="assets/img/project/project4/2.jpg"
                  alt=""
                />
              </div>
              <div
                class="container pro-text dsn-animate"
                data-dsn-animate="section"
              >
                <div
                  class="title-cover theme-color"
                  data-dsn-grid="move-section"
                  data-dsn-opacity="0.02"
                  data-dsn-duration="170%"
                  data-dsn-move="0%"
                >
                  Intentional
                </div>
                <h3 class="dsn-up">
                  Help Millions To Bring <br />
                  There Creative Projects To Life
                </h3>
                <p class="dsn-up">
                  We were thoughtful about presenting these in a way where we
                  could also tell the story of the individual.. It is a long
                  established fact that a reader will be distracted by the
                  readable content of a page when looking at its layout. The
                  point of using Lorem Ipsum is that it has a more-or-less
                  normal distribution of letters.
                </p>
              </div>
            </div>
          </div>
          <div
            class="slider-project slider-project-min-height slider-project-3 section-margin dsn-arrow"
          >
            <div class="container no-padding">
              <div class="proj-slider-image">
                <div class="item-project">
                  <img src="assets/img/project/project4/3.jpg" alt="" />
                </div>
                <div class="item-project">
                  <img src="assets/img/project/project4/4.jpg" alt="" />
                </div>
                <div class="item-project">
                  <img src="assets/img/project/project4/5.jpg" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div class="container-fluid no-padding section-margin">
            <div
              class="img-box-parallax parallax-responsive"
              data-dsn-grid="move-up"
            >
              <img
                src="assets/img/project/project4/6.jpg"
                class="has-bigger-scale"
                alt=""
              />
              <div class="cap"><span>Photography</span></div>
            </div>
          </div>
          <div
            class="container section-p section-margin p-relative"
            data-dsn-animate="section"
          >
            <div class="intro-text text-center">
              <div class="inner">
                <h2 class="dsn-text">
                  These are brilliant. I love your description here,but I saw
                  them first on your portfolio site. You were linked to in a
                  Creative Blog article on portfolio design.
                </h2>
                <p class="caption-p dsn-up">Rick Henderson</p>
              </div>
            </div>
          </div>
        </div>
        <div
          class="next-project p-relative over-hidden section-padding mt-section"
          data-dsn-footer="project"
        >
          <div
            id="dsn-footer-hero"
            class="img-next-box p-absolute w-100 h-100"
            data-overlay="5"
          >
            <img
              class="cover-bg-img"
              src="assets/img/project/project5/1.jpg"
              alt=""
              data-dsn-position="85%"
            />
          </div>
          <div class="margin-lr-100 h-100">
            <div class="row align-items-center h-100">
              <div class="next-inner p-relative w-100">
                <h2 class="bg-title p-absolute">Next Project</h2>
                <div id="dsn-footer-description" class="metas d-inline-block">
                  <span>Fashion</span><span>Photography</span>
                </div>
                <h1 class="title">
                  <a
                    id="dsn-footer-title"
                    href="project5.html"
                    class="effect-ajax"
                    data-dsn-ajax="next"
                    >Blue Edition
                  </a>
                  <div class="full-width img-box-shadow"></div>
                </h1>
              </div>
            </div>
          </div>
        </div>
        <footer class="footer p-relative">
          <div class="footer-container">
            <div class="d-flex align-items-center h-100">
              <div class="column-left">
                <div class="footer-social p-relative">
                  <ul>
                    <li class="over-hidden">
                      <a
                        href="#"
                        data-dsn="parallax"
                        target="_blank"
                        rel="nofollow"
                        >Dribbble.</a
                      >
                    </li>
                    <li class="over-hidden">
                      <a
                        href="#"
                        data-dsn="parallax"
                        target="_blank"
                        rel="nofollow"
                        >Behance.</a
                      >
                    </li>
                    <li class="over-hidden">
                      <a
                        href="#"
                        data-dsn="parallax"
                        target="_blank"
                        rel="nofollow"
                        >Linkedin.</a
                      >
                    </li>
                    <li class="over-hidden">
                      <a
                        href="#"
                        data-dsn="parallax"
                        target="_blank"
                        rel="nofollow"
                        >Twitter.</a
                      >
                    </li>
                  </ul>
                </div>
              </div>
              <div class="scroll-top animation-rotate" data-dsn="parallax">
                <img src="assets/img/scroll_top.svg" alt="" /><i
                  class="fa fa-angle-up"
                ></i>
              </div>
              <div class="column-right">
                <h5>
                  2020 © Made with <span class="love">♥</span>by
                  <a
                    class="link-hover"
                    data-hover-text="Design Grid."
                    target="_blank"
                    rel="nofollow"
                    href="https://themeforest.net/user/design_grid/portfolio/"
                    >Design Grid.</a
                  >
                </h5>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </main>
    <div class="cursor">
      <div class="cursor-helper">
        <span class="cursor-drag">Drag</span
        ><span class="cursor-view">View</span
        ><span class="cursor-open"><i class="fas fa-plus"></i></span
        ><span class="cursor-close">Close</span
        ><span class="cursor-play">play</span
        ><span class="cursor-next"><i class="fas fa-arrow-right"></i></span
        ><span class="cursor-prev"><i class="fas fa-arrow-left"></i></span>
      </div>
    </div>
    <div class="scroll-to-top">
      <img src="assets/img/scroll_top.svg" alt="" />
      <div class="box-numper"><span>10%</span></div>
    </div>
    <div class="day-night">
      <div class="night active" data-dsn-theme="dark">
        <svg width="48" height="48" viewBox="0 0 48 48">
          <rect x="12.3" y="23.5" width="2.6" height="1"></rect>
          <rect
            x="16.1"
            y="15.3"
            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.8871 16.5732)"
            width="1"
            height="2.6"
          ></rect>
          <rect x="23.5" y="12.3" width="1" height="2.6"></rect>
          <rect
            x="30.1"
            y="16.1"
            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -2.5145 27.0538)"
            width="2.6"
            height="1"
          ></rect>
          <rect x="33.1" y="23.5" width="2.6" height="1"></rect>
          <rect
            x="30.9"
            y="30.1"
            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.9952 31.4264)"
            width="1"
            height="2.6"
          ></rect>
          <rect x="23.5" y="33.1" width="1" height="2.6"></rect>
          <rect
            x="15.3"
            y="30.9"
            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -17.3677 20.9457)"
            width="2.6"
            height="1"
          ></rect>
          <path
            d="M24,18.7c-2.9,0-5.3,2.4-5.3,5.3s2.4,5.3,5.3,5.3s5.3-2.4,5.3-5.3S26.9,18.7,24,18.7z M24,28.3c-2.4,0-4.3-1.9-4.3-4.3s1.9-4.3,4.3-4.3s4.3,1.9,4.3,4.3S26.4,28.3,24,28.3z"
          ></path>
        </svg>
      </div>
      <div class="moon" data-dsn-theme="night">
        <svg width="48" height="48" viewBox="0 0 48 48">
          <path
            d="M24,33.9c-5.4,0-9.9-4.4-9.9-9.9c0-4.3,2.7-8,6.8-9.4l0.8-0.3l-0.1,0.9c-0.2,0.6-0.2,1.3-0.2,1.9c0,5.2,4.3,9.5,9.5,9.5c0.6,0,1.3-0.1,1.9-0.2l0.8-0.2L33.3,27C32,31.1,28.3,33.9,24,33.9z M20.4,15.9c-3.2,1.4-5.3,4.5-5.3,8.1c0,4.9,4,8.9,8.9,8.9c3.6,0,6.7-2.1,8.1-5.3c-0.4,0-0.8,0.1-1.3,0.1c-5.8,0-10.5-4.7-10.5-10.5C20.4,16.7,20.4,16.3,20.4,15.9z"
          ></path>
        </svg>
      </div>
    </div>
    <!-- Optional JavaScript -->
    <script src="assets/js/jquery-3.1.1.min.js"></script>
    <script src="assets/js/plugins.js"></script>
    <script src="assets/js/dsn-grid.js"></script>
    <script src="assets/js/custom.js"></script>
  </body>
</html>
